<template>
  <!-- <div>心愿单页面 -- (李文宇)</div> -->
  <div class="wish">
    <!-- 标题 -->
    <header>
      <div class="wishtop">心愿单</div>
    </header>
    <!-- name-tab选项卡 -心愿单内容-->
    <van-tabs
      v-model:active="active"
      line-width="17px"
      :animated="true"
      :swipeable="true"
    >
      <van-tab title="收藏房源" name="a">
        <!-- 判断数据变量haveorno的值为1，则显示收藏，反之显示空白页 -->
        <div v-if="wishList.length == 0">
          <van-empty description="快去收藏吧" />
        </div>
        <!-- 这里是值为1时需要显示的传过来的收藏项，对li进行渲染遍历即可，目前实现中，暂放死数据 -->
        <ul v-else>
          <li
            class="wishlist"
            v-for="item in wishList"
            :key="item.id"
            @click="godetail(item.house_id)"
          >
            <img :src="item.imgUrl" alt="" />
            <div class="wishbox">
              <div class="name-money">
                <span class="name">{{ item.lease }} {{ item.apartment }}</span>
                <span class="muchmouths">
                  <div class="num">{{ item.price }}</div>
                  <div class="numlast">元/月</div>
                </span>
              </div>
              <div class="adress">
                {{ item.region }}-{{ item.region }}|{{ item.face }}·{{
                  item.room
                }}·{{ item.floor }}
              </div>
              <div class="others">
                <div>{{ item.inform[0] }}</div>
                <div>{{ item.inform[1] }}</div>
                <div>{{ item.inform[2] }}</div>
                <div>{{ item.inform[3] }}</div>
              </div>
            </div>
          </li>
        </ul>
      </van-tab>
      <!-- 收藏小区和看房行程的收藏功能暂不实现 -->
      <van-tab title="收藏小区" name="b">
        <van-empty description="暂无收藏" />
      </van-tab>
      <van-tab title="看房行程" name="c">
        <van-empty description="暂无行程" />
      </van-tab>
    </van-tabs>
    <!-- 推荐好房 -->
    <van-sidebar v-model="goodshouse">
      <van-sidebar-item title="推荐好房" />
    </van-sidebar>
    <ul>
      <li
        class="wishlist"
        v-for="item in list"
        :key="item.id"
        @click="gotoDetail(item.house_id)"
      >
        <img :src="item.imgUrl" alt="" />
        <div class="wishbox">
          <div class="name-money">
            <span class="name">{{ item.lease }} {{ item.apartment }}</span>
            <span class="muchmouths">
              <div class="num">{{ item.price }}</div>
              <div class="numlast">元/月</div>
            </span>
          </div>
          <div class="adress">
            {{ item.region }}-{{ item.region }}|{{ item.face }}·{{
              item.room
            }}·{{ item.floor }}
          </div>
          <div class="others">
            <div>{{ item.inform[0] }}</div>
            <div>{{ item.inform[1] }}</div>
            <div>{{ item.inform[2] }}</div>
            <div>{{ item.inform[3] }}</div>
          </div>
        </div>
      </li>
    </ul>
    <!-- 没有更多了 -->
    <div class="bottom">———— 已经到底了 ————</div>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
// 引入接口封装
import { getNearByData, getOneData } from "../../utils/app";
export default {
  // vue3部分
  setup() {
    const goodshouse = ref(0);
    const active = ref(0);

    const state = reactive({
      baletu0:
        "             ________          ___            ____________        ",
      baletu1:
        "            /  __    /|       /  /|          /____   ____/|       ",
      baletu2:
        "           /  /|/  _/ /      /  / /          |___/  /|___|/       ",
      baletu3:
        "          /  __   |_|/      /  / /              /  / /            ",
      baletu4:
        "         /  /|/   /|       /  /_/____          /  / /             ",
      baletu5:
        "        /________/ /      /_________/|        /__/ /              ",
      baletu6:
        "        |________|/       |_________|/        |__|/               ",
      baletu7:
        "                                                                  ",
      baletu8:
        "           🐇           baletu@163.com         🥕                ",
    });
    console.log(state.baletu0);
    console.log(state.baletu1);
    console.log(state.baletu2);
    console.log(state.baletu3);
    console.log(state.baletu4);
    console.log(state.baletu5);
    console.log(state.baletu6);
    console.log(state.baletu7);
    console.log(state.baletu8);
    return {
      goodshouse,
      active,
      state,
    };
  },
  //vue2部分
  data() {
    return {
      list: [],
      haveorno: 0,
      wishList: [],
    };
  },
  mounted() {
    this.getwish();
    this.all();
  },
  methods: {
    async all() {
      const res = await getNearByData();
      this.list = res.list;
    },
    //点击跳转到detail详情页---id目前不需要
    gotoDetail(id) {
      this.$router.push("/detail/" + id);
    },

    getwish() {
      if (localStorage.getItem("token")) {
        let arr = JSON.parse(localStorage.getItem("gather"));
        arr.forEach(async (item) => {
          const res = await getOneData({
            id: item,
          });
          this.wishList.push(res.list);
        });
      }
    },

    // 心愿单中房源信息点击跳转到detail详情页面
    godetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
};
</script>
<style lang="less">
.wish {
  //全局背景颜色
  background: #fff;
  .wishtop {
    width: 100%;
    height: 46px;
    text-align: center;
    line-height: 46px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #535353;
  }
  .wishlist {
    width: 100%;
    padding-right: 14px;
    padding-left: 14px;
    margin-top: 18px;
    margin-bottom: 18px;
    height: 72px;
    .wishbox {
      margin-left: 13px;
      width: 232px;
      height: 72px;
      float: left;
      .name-money {
        height: 24px;
        .name {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #0b0b0b;
          float: left;
          height: 24px;
          line-height: 24px;
        }
        .muchmouths {
          float: right;
          overflow: hidden;
          .num {
            float: left;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #cb4242;
          }
          .numlast {
            float: right;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #cb4242;
            line-height: 24px;
          }
        }
      }
      .adress {
        height: 24px;
        line-height: 24px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #767676;
      }
      .others {
        height: 24px;
        line-height: 24px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        :nth-child(1) {
          margin-left: 0;
        }
        div {
          margin-left: 13px;
          float: left;
          font-size: 11px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #7c7b81;
        }
      }
    }
    img {
      width: 102px;
      height: 72px;
      display: block;
      float: left;
    }
  }
  // 底部
  .bottom {
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 15px;
    color: #aaa;
  }
}
.wish .van-tab__text--ellipsis {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
}
.wish .van-sidebar {
  padding: 0 18px;
  // margin: 23px 0;
  width: 100%;
  .van-sidebar-item--select::before {
    width: 3px;
    height: 16px;
    background: #d24657;
  }
  .van-sidebar-item__text {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #434343;
  }
}
.wish .van-tab__text {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 600;
}
.wish .van-tab--active {
  color: #d23240;
}
</style>
